<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link href="/component/pear/css/pear.css" rel="stylesheet" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="role-table" lay-filter="role-table"></table>
			</div>
		</div>
		<script type="text/html" id="role-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		</script>

		<script type="text/html" id="role-enable">
			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="role-enable"  {{ d.enable== true ? 'checked' : '' }} />
		</script>

		<script src="/component/layui/layui.js"></script>
		<script src="/component/pear/pear.js"></script>
		<script>
		    layui.use(['table','form','jquery'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
		        let cols = [
		            [
		                {title: '角色名', field: 'roleName', align:'center',width: 120},
		                {title: '描述', field: 'description', align:'center'},
		                {title: '创建时间', field: 'createTime', align:'center',sort:true},
		                {title: '操作', toolbar: '#role-bar', align:'center', width:130}
		            ]
		        ]

				tableIns = table.render({
					elem: '#role-table',
					url: '/api/role/list',
					page: false,
					cols: cols,
					skin: 'line',
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports'],
					id: 'testReload',
					//解决页码的问题
					done: function (res) {
					// 获得当前页码
					var brforeCurr = tableIns.config.page.curr;
					// 获得当前页的记录数
					var dataLength = table.cache['testReload'].length;
					var count = res.count; // 获得总记录数
					//如果当前页的记录数为0并且总记录数不为0
					if (dataLength == 0 && count != 0) {
						// 刷新表格到上一页
						table.reload("testReload", {
							page: {
								curr: brforeCurr - 1
							}
						});
					}
					}
				})



		        table.on('tool(role-table)', function(obj){
		            if(obj.event === 'edit'){
		                window.edit(obj);
		            }
		        });

		        //修改角色
				window.edit = function(obj){
					var data = obj.data;
					layer.open({
						type: 2,
						title: '修改',
						shade: 0.1,
						area: ['500px', '500px'],
						content: '/api/role/roleEdit/?roleId='+data.roleId
					});
				}
		    })
		</script>
	</body>
</html>
